<!doctype html>
<html>
  <head>
    <style type="text/css">
      table {
        border-collapse: collapse;
      }
      td, th {
        border: 1px solid #000;
        padding: 2px 8px;
        font-family: "Helvetica Neue";
        text-align: center;
      }
      td.fail {
        background-color: #933;
      }
      td.pass {
        background-color: #061;
      }
    </style>
    <title>Preloading tests</title>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th></th>
          <th colspan="3">src exists</th>
          <th colspan="3">src does not exist</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td>onload</td>
          <td>onreadystatechange</td>
          <td>onerror</td>
          <td>onload</td>
          <td>onreadystatechange</td>
          <td>onerror</td>
        </tr>
        <tr>
          <td>&lt;script &gt;</td>
          <td id="script-onload-exist" class="fail"></td>
          <td id="script-onreadystatechange-exist" class="fail"></td>
          <td id="script-onerror-exist" class="fail"></td>
          <td id="script-onload-not-exist" class="fail"></td>
          <td id="script-onreadystatechange-not-exist" class="fail"></td>
          <td id="script-onerror-not-exist" class="fail"></td>
        </tr>
        <tr>
          <td>&lt;script type="bogus"&gt;</td>
          <td id="script-bogus-onload-exist" class="fail"></td>
          <td id="script-bogus-onreadystatechange-exist" class="fail"></td>
          <td id="script-bogus-onerror-exist" class="fail"></td>
          <td id="script-bogus-onload-not-exist" class="fail"></td>
          <td id="script-bogus-onreadystatechange-not-exist" class="fail"></td>
          <td id="script-bogus-onerror-not-exist" class="fail"></td>
        </tr>
        <tr>
          <td>&lt;object&gt;</td>
          <td id="object-onload-exist" class="fail"></td>
          <td id="object-onreadystatechange-exist" class="fail"></td>
          <td id="object-onerror-exist" class="fail"></td>
          <td id="object-onload-not-exist" class="fail"></td>
          <td id="object-onreadystatechange-not-exist" class="fail"></td>
          <td id="object-onerror-not-exist" class="fail"></td>
        </tr>
        <tr>
          <td>&lt;img&gt;</td>
          <td id="img-onload-exist" class="fail"></td>
          <td id="img-onreadystatechange-exist" class="fail"></td>
          <td id="img-onerror-exist" class="fail"></td>
          <td id="img-onload-not-exist" class="fail"></td>
          <td id="img-onreadystatechange-not-exist" class="fail"></td>
          <td id="img-onerror-not-exist" class="fail"></td>
        </tr>
        <tr>
          <td>&lt;link&gt;</td>
          <td id="link-onload-exist" class="fail"></td>
          <td id="link-onreadystatechange-exist" class="fail"></td>
          <td id="link-onerror-exist" class="fail"></td>
          <td id="link-onload-not-exist" class="fail"></td>
          <td id="link-onreadystatechange-not-exist" class="fail"></td>
          <td id="link-onerror-not-exist" class="fail"></td>
        </tr>
      </tbody>
    </table>
    <div id="ua"></div>
    <script type="text/javascript">
      var srcs          = {
            'exist'      : 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js',
            'not-exist'  : 'unicorn'
          },
          elems         = ['script', 'script-bogus', 'object', 'img', 'link'],
          callbacks     = ['onload', 'onreadystatechange', 'onerror'];

      function each( arr, fn ) {
        for ( var i = 0, count = arr.length; i < count; i++ )
          fn( arr[i], i );
      }

      (function( doc, head ) {

        for ( type in srcs ) {

          (function( type ){

            each( callbacks, function( callback ) {

              each( elems, function( elem ) {

                var script  = doc.createElement( elem.split('-')[0] )

                if ( elem == 'link') {
                  script.rel  = "stylesheet";
                  script.href = srcs[type];
                } else if ( elem == 'script-bogus') {
                  script.src = script.data = srcs[type];
                  script.type = 'bogus';                                
                } else {
                  script.src = script.data = srcs[type];
                }

                script[callback] = function() {
                  if (( callback != 'onreadystatechange' ) || (callback == 'onreadystatechange' && ( script.readyState == "loaded" || script.readyState == "complete"))) {
                    doc.getElementById([elem, callback, type].join('-')).className = 'pass';
                    head.removeChild( script );
                  }

                };
                head.appendChild(script);

              });

            });


          })( type );

        };

        doc.getElementById('ua').appendChild( document.createTextNode( navigator.userAgent ));

      })( document, document.getElementsByTagName('head')[0] );
    </script>
  </body>
</html>